<template>
	<!--地图详细页-->
	<view class="page-body">
		<view class="page-section page-section-gap">
			<!--可增加功能：
            1、当前已走到的图标可换成头像，
            2、已走过的地方改变名称颜色subkey="key"
			longitude 中心经度
			latitude 中心纬度
			-->
			<map style="width: 100%; height: 100%;" :polyline="datalist.polyline" :latitude="datalist.latitude"
				:longitude="datalist.longitude" min-scale="3" max-scale="20" scale="12" enable-zoom="true"
				:markers="datalist.markers" show-location="true" layer-style="1" @markertap="markertap">
			</map>
		</view>
		<view class="page-footer" @click="todetail">
			<view class="footer-box">
				<image class="icon-csxx" src="/static/clockIn/icon-csxx.png"></image>
				<view class="but-txt">参赛信息</view>
			</view>
			<!-- <count-info :datalist="datalist" @onclick="todetail"></count-info> -->
		</view>
		<w-popup :show="showtip" :type="type1" @change="change1">
			<view class="w-tip">
				<view class="w-con">
					<text class="fc_green w-con-dk">打卡点：</text>{{markers.name}}<text class="comp_content_sta"
						:class="markers.status===2?'sign_no':'sign_on'">{{markers.status===2?'未完成':'已完成'}}</text>
				</view>
				<view class="w-con2">
					<view><text class="fc_green">距离：</text>{{markers.distance}}</view>
					<view class="icondt icons icon-area" @click="address"></view>
				</view>
			</view>
		</w-popup>
		<w-popup :show="showshare" :type="type2" @change="change2">
			<!--关闭 :mask-click="false" -->
			<view class="w-tip2">
				<view class="w-con">

				</view>
			</view>
		</w-popup>
	</view>
</template>

<script>
	import wPopup from '@/components/w-popup/w-popup2.vue'
	import countInfo from './components/count_info.vue'
	//接口
	import {
		getGameMapInfos, //获取赛事地图坐标点及坐标点信息
	} from '@/common/api.js'
	export default {
		components: {
			countInfo,
			wPopup
		},
		data() {
			return {
				list: [],
				datalist: {
					polyline: [], //路线
					latitude: 24.504015, //中心维度
					longitude: 118.177742, //中心经度
					markers: [], //标记点
				},
				showtip: false, //是否显示弹窗1
				showshare: false, //是否显示弹窗2
				content1: '顶部弹 popup',
				type1: '', //弹窗显示方式
				content2: '顶部弹 popup',
				type2: '', //弹窗显示方式
				markers: {
					name: '',
					status: 1,
					distance: ''
				},
				game_id: '', //传参
			}
		},
		onLoad(option) {
			console.log(33333, option)
			var that = this;
			var amapFile = require('../../gaodemap/amap-wx.js');
			var amapPlugin = new amapFile.AMapWX({
				key: "e980a7ec33ce4e1befd80c4697673c3a"
			});
			if (option.game_id) {
				this.game_id = option.game_id;
			}
			this.getLocation();
		},
		methods: {
			//获取位置
			getLocation() {
				let _self = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						_self.datalist.latitude = res.latitude;
						_self.datalist.longitude = res.longitude;
						let objdata = {
							game_id: _self.game_id,
							lat: res.latitude,
							lng: res.longitude
						}
						getGameMapInfos(objdata).then(res => {
							console.log(3333, res)
							if (res.code === 2000) {
								if (res.data.length > 0) {
									let resdata = res.data;
									let markers = [];
									res.data.forEach(item => {
										let marker = {
											id: 0,
											width: 44,
											height: 51,
											latitude: 24.504015,
											longitude: 118.177742,
											status:0, //坐标完成情况，1.已完成，2.未完成
											name:'', //坐标名称
											site:'', //start 则是开始，如果为end 则是结束，如果为空，则是中间点
											date:'',
											distance :'', //距离坐标还有多少米 
											iconPath: '/static/clockIn/clock.png',
											/* callout: {
												padding: 2,
												fontSize: 13,
												bgColor: "#fff",
												color: "#333",
												borderRadius: 5,
												display: "ALWAYS",
												content: ""
											} */
										}
										marker.id = item.id;
										marker.date = item.date;
										marker.distance = item.distance;
										if(item.site === 'start' && item.status === 2){
											marker.iconPath = '/static/clockIn/origin.png';
										}else if(item.site === 'start' && item.status === 1){
											marker.iconPath = '/static/clockIn/origin_on.png';
										}else if(item.site === 'end' && item.status === 2){
											marker.iconPath = '/static/clockIn/des.png';
										}else if(item.site === 'end' && item.status === 1){
											marker.iconPath = '/static/clockIn/des_on.png';
										}else if(item.site === '' && item.status === 2){
											marker.iconPath = '/static/clockIn/clock.png';
										}else if(item.site === '' && item.status === 1){
											marker.iconPath = '/static/clockIn/clock_on.png';
										}
										marker.site = item.site;
										marker.latitude = item.lat;
										marker.longitude = item.lng;
										marker.status = item.status;
										marker.name = item.name;
										markers.push(marker);
									})
									_self.datalist.markers = markers;
								}
							}
						})
					}
				});

			},
			//跳转详细页
			todetail() {
				uni.navigateTo({
					url: '/pages/user/entryDetail?id='+ this.game_id
				})
			},
			change1(e) {
				if (!e.show) {
					this.showtip = false;
				}
			},
			change2(e) {
				if (!e.show) {
					this.showshare = false
				}
			},
			//取消
			cancel(type) {
				this['show' + type] = false
			},
			//当前位置
			address() {
				let _self = this;
				/* this.showtip = false;
				this.content = 'center'
				this.type2 = 'bottom';
				this.showshare = true; */
				uni.openLocation({
					latitude: _self.datalist.latitude,
					longitude: _self.datalist.longitude,
					success: function() {
						console.log('success');
					}
				});
			},
			markertap(e) {
				console.log(2222, e.detail.markerId)
				if(this.datalist.markers && this.datalist.markers.length>0){
					this.datalist.markers.forEach(item =>{
						if(item.id === e.detail.markerId){
							this.markers.name = item.name;
							this.markers.status = item.status;
							this.markers.distance = item.distance;
							this.markers.latitude = item.latitude;
							this.markers.longitude = item.longitude;
						}
					})
					this.content1 = 'center'
					this.type1 = 'top';
					this.showtip = true;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.fc_green {
		font-size: 26rpx;
		color: #02BB6F;
	}

	.page-body {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		margin: 0 auto;

		.page-section {
			display: flex;
			height: 100vh;
			width: 100vw;
		}

		.page-footer {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 28rpx;
			left: 30rpx;
			right: 30rpx;
			height: 86rpx;
			background: #02BB6F;
			box-shadow: 0px 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 43rpx;

			.footer-box {
				display: flex;
				justify-content: center;
				align-items: center;

				.icon-csxx {
					width: 30rpx;
					height: 30rpx;
					margin-right: 12rpx;
				}

				.but-txt {
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
		}

		/* 提示窗口 */
		.w-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			width: 90vw;
			min-height: 147rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx 30rpx;
			margin: 30rpx auto 0;

			.w-con {
				float: left;
				font-size: 26rpx;
				color: #333;
				line-height: 50rpx;

				.w-con-dk {
					float: left;
				}

				.comp_content_sta {
					font-size: 22rpx;
					padding: 0 10rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					margin-left: 20rpx;
				}
			}

			.w-con2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				line-height: 50rpx;

				.icondt {
					font-size: 36rpx;
					color: #02BB6F;
				}
			}
		}

		/* 提示窗口2 */
		.w-tip2 {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			width: 100vw;
			height: 250rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
			padding: 20rpx 30rpx;
			margin: 30rpx auto 0;

			.w-con {
				float: left;
				font-size: 26rpx;
				color: #333;
				line-height: 50rpx;

				.w-con-dk {
					float: left;
				}

				.comp_content_sta {
					font-size: 22rpx;
					padding: 0 10rpx;
					height: 30rpx;
					line-height: 30rpx;
					border-radius: 15rpx;
					margin-left: 20rpx;
				}
			}

			.w-con2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #333;
				line-height: 50rpx;

				.icondt {
					font-size: 36rpx;
					color: #02BB6F;
				}
			}
		}
	}
</style>
